import { useEffect } from "react"
import { useState } from "react"
import UseEffectChild from "./useEffectChild"
const DemoEffect=()=>{
    const [count,setCount]=useState(0)
    const updateCount=()=>{
        setCount(count+1)
    }
    useEffect(()=>{
        console.log('获取到更新前后的count',count)
    })
    return (<div>
         <pre>
       useEffect 可以传入2个参数，第1个参数为我们定义的执行函数，第2个参数是依赖关系(可选参数)。若一个函数组件中定义了多个useEffect，那么他们实际执行顺序是按照在代码中定义的先后顺序来执行的。
第一个参数中的代码是组件挂载和更新就会执行的代码。<br/>
return 出去的代码会在组件卸载时才会执行。<br />
依赖数组不是必填项，如果不传则每次渲染都会去执行，传值的话在依赖项发生改变时函数中的代码才会执行，如果传空数组则会在组件第一次挂载才会执行。
       </pre>
        <h2>useEffect</h2>
           count: {count}
           {
            count===0?<UseEffectChild/>:null
           }
        <button onClick={updateCount}>更新count+1</button>
    </div>)
}
export default DemoEffect